<script setup lang="tsx">
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useRole } from "./utils/hook";
import GroupLine from "@iconify-icons/ri/building-fill";
import GroupLine2 from "@iconify-icons/ri/hotel-line";
import Balance from "@iconify-icons/ri/exchange-cny-fill";
import Sim from "@iconify-icons/ri/file-chart-fill";
import { useDark, randomGradient } from "./utils";
const router = useRouter();
const treeRef = ref();
const tableRef = ref();
const { isDark } = useDark();
const { form, loading, userInfo, GetUserInfo, addBalance } = useRole(
  tableRef,
  treeRef
);
onMounted(() => {
  GetUserInfo();
});
const handleClick = value => {
  router.push({
    path: "/communicationInterface/index",
    query: { item: value } // 将参数作为查询参数传递
  });
};
// 上面的消息通知

onUnmounted(() => {
  console.log("sse close");
});
</script>

<template>
  <div
    v-loading="loading"
    element-loading-text="加载中..."
    style="width: 98%; height: 100%"
  >
    <div class="home_top">
      <div class="top_data_card" style="background-color: #e8faea">
        <div class="top_data_card_left">
          <IconifyIconOffline :icon="GroupLine" color="#50c8ac" width="52" />
        </div>

        <div class="top_data_card_right">
          <div style="font-weight: 600">公司名称</div>
          <div class="right_content">
            {{ userInfo.company }}
          </div>
        </div>
      </div>
      <div class="top_data_card" style="background-color: #e5dffb">
        <div class="top_data_card_left">
          <IconifyIconOffline :icon="GroupLine2" color="#bea3ff" width="52" />
        </div>

        <div class="top_data_card_right">
          <div style="font-weight: 600">公司全称</div>
          <div class="right_content">{{ userInfo.name }}</div>
        </div>
      </div>
      <div class="top_data_card" style="background-color: #fdf1e6">
        <div class="top_data_card_left">
          <IconifyIconOffline :icon="Sim" color="#75a3fe" width="52" />
        </div>

        <div class="top_data_card_right">
          <div style="font-weight: 600">卡数量</div>
          <div class="right_content">{{ userInfo.count }}</div>
        </div>
      </div>
      <div
        class="top_data_card"
        style="background-color: #f0f5fb; cursor: pointer"
        @click="addBalance()"
      >
        <div class="top_data_card_left">
          <IconifyIconOffline :icon="Balance" color="#ffc17c" width="52" />
        </div>

        <div class="top_data_card_right">
          <div style="font-weight: 600">账户余额</div>
          <div class="right_content">{{ userInfo.depositedAmount }}</div>
        </div>
      </div>
    </div>
    <div class="home_bottom">
      <div class="bottom_left" />
    </div>
  </div>
</template>

<style scoped sass>
.home_top {
  height: 18%;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  overflow: auto;
}
.top_data_card {
  /* border: 1px solid red; */
  border-radius: 12px;
  width: 22%;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top_data_card_left {
  background-color: #ffffff;
  border-radius: 13px;
  display: flex;
  height: 5rem;
  width: 5rem;
  align-items: center;
  justify-content: center;
}
.top_data_card_right {
  /* border: 1px solid red; */
  width: 50%;
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.right_content {
  font-size: 1.2rem;
  display: -webkit-box; /* 必须 */
  -webkit-box-orient: vertical; /* 必须 */
  -webkit-line-clamp: 2; /* 多行显示行数 */
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home_bottom {
  height: 78%;
  margin-top: 1%;
  border: 1px solid red;
}
</style>
